<template>
  <a-card>
    <div>
      <a-form layout="horizontal">
        <div>
          <a-row >
            <a-col :md="6" :sm="24" >
              <a-form-item label="选择园区" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" name="name" :rules="[{ required: true, message: '测试不能为空', whitespace: true },]">
                <a-select v-model="info.farmName" placeholder="请选择园区" @change="farmChange">
                  <a-select-option
                      v-for="(item, index) in farmList"
                      :key="index" :value="item.FarmId">
                    {{item.FarmName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24" >
              <a-form-item label="选择地块" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                <a-select v-model="info.greenHouseName" placeholder="请选择地块" @change="houseChange">
                  <a-select-option
                      v-for="(item, index) in greenHouseList"
                      :key="index" :value="item.GreenHouseId">
                    {{item.GreenHouseName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24" >
              <a-form-item label="种植状态" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                <a-select v-model="info.status" placeholder="请选择地块" @change="houseChange">
                  <a-select-option
                      v-for="(item, index) in plantStatusList"
                      :key="index" :value="item">
                    {{item}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <div style="margin: 3px 0 0 8px;">
                <a-button type="primary" @click="search">查询</a-button>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
  </a-card>
</template>

<script>
import {mapGetters} from "vuex";
import {list as farmList} from "@/services/farm";
import {list as greenHouseList} from "@/services/greenhouse";
import {check} from "@/services/plant";

export default {
  name: "Produce",
  data() {
    return {
      info: {
        farmId: undefined,
        farmName: undefined,
        greenHouseId: undefined,
        greenHouseName: undefined
      },
      query: {
        farm_id: '',
        status: '所有'
      },
      plantStatusList: ['所有', '种植中', '已完成'],
      farmList: [],
      greenHouseList: []
    }
  },
  computed: {
    ...mapGetters('account', ["user_mobile"])
  },
  created() {
    this.getFarmList()
  },
  methods: {
    async getFarmList() {
      let res = await farmList()
      this.farmList = res.Data
    },
    async getGreenHouseList() {
      let res = await greenHouseList(this.info.farmId)
      res.Data.unshift({

      })
      this.greenHouseList = res.Data
    },
    async farmChange(e) {
      this.info.farmId = e
      const farmInfo = this.farmList.find(item => item.FarmId == e)
      this.queryInit()
      const res = await check({
        farm_id: e,
        farm_name: farmInfo.FarmName,
        user: this.user_mobile
      })
      if(res.code == 1) {
        await this.getGreenHouseList()
      }
    },
    async search() {
      if(!this.info.greenHouseId) {
        return this.$message.error('地块未先择')
      }
    },
    houseChange(e) {
      this.info.greenHouseId = e
    },
    queryInit() {
      this.info.greenHouseId = undefined
      this.info.greenHouseName = undefined
    },
  }
}
</script>

<style scoped>

</style>
